<template>
  <div class="sidebar">
    <el-card>
      <div style="margin-bottom: 30px; font-size: 18px;">
        <i class="el-icon-info" style="color: #666;"></i>
        <span style="font-size: 18px; font-weight: 600; color: rgb(73, 80, 96);">Information</span>
      </div>
      <el-row>
        <el-col :span="14">
          <span>Problem ID</span>
        </el-col>
        <el-col :span="10">
          <span>{{ model.problemId }}</span>
        </el-col>
      </el-row>
      <div class="divider"></div>
      <el-row>
        <el-col :span="14">
          <span>Time Limit</span>
        </el-col>
        <el-col :span="10">
          <span>{{ model.timeLimit }}&nbsp;s</span>
        </el-col>
      </el-row>
      <div class="divider"></div>
      <el-row>
        <el-col :span="14">
          <span>Memory Limit</span>
        </el-col>
        <el-col :span="10">
          <span>{{ model.memoryLimit }}&nbsp;MB</span>
        </el-col>
      </el-row>
      <div class="divider"></div>
      <el-row>
        <el-col :span="14">
          <span>Submitted</span>
        </el-col>
        <el-col :span="10">
          <span>{{ model.submit }}</span>
        </el-col>
      </el-row>
      <div class="divider"></div>
      <el-row>
        <el-col :span="14">
          <span>Solved</span>
        </el-col>
        <el-col :span="10">
          <span>{{ model.accept }}</span>
        </el-col>
      </el-row>
      <div class="divider"></div>
      <el-row>
        <el-col :span="14">
          <span>isSpj</span>
        </el-col>
        <el-col :span="10">
          <span v-if="model.isSpj" style="color: red">Special Judge</span>
          <span v-else style="color: dodgerblue">No Special Judge</span>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>


export default {
  name: "ProblemDetailParams",
  props: {
    model: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
.sidebar {

  span {
    font-size: 12px;
  }

  .divider {
    border-bottom: 1px dotted #e9eaec;
    margin-bottom: 15px;
  }

}
</style>